<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片区 -->
		<el-card>


			<select v-model="prov" @change="getCity()">
				<option v-for="item in arr" :key="item.name" :value="item.name">
					{{item.name}}
				</option>
			</select>
			<select v-model="city" @change="getCounty()">
				<option v-for="item in cityArr" :key="item.name" :value="item.name">
					{{item.name}}
				</option>
			</select>
			<select v-model="country">
				<option v-for="item in countryArr" :key="item.name" :value="item.name">
					{{item.name}}
				</option>
			</select>
			<div @click="adress()">
				确定
			</div>

		</el-card>


	</div>
</template>

<script>
	import arrAll from "../../api/items.js"

	export default {
		data() {
			return {
				prov: "请选择", //省
				city: "", //市
				country: "", //区

				arr: arrAll.arrAll, //省数组
				cityArr: [], //市数组
				countryArr: [], //区数组


			}
		},
		mounted() {
			//item.js中注释的内容可根据实际情况释放
			// console.log(this.arr); //在mounted中打印看一下获取的数据
		},  
		methods: {
			getCity() {
				for (var i = 0; i < this.arr.length; i++) {
					var obj = this.arr[i] // 因为要多次调用，所以用个变量来保存它
					if (this.prov == obj.name) { // 如果下拉框选择的 prov 等于遍历得到的 obj.name
						this.cityArr = obj.sub; // 数组 cityArr 的值就等于遍历得到的 obj.sub 数组
					}
				}
			},
			getCounty() { //获取居住地的市信息
				for (var i = 0; i < this.cityArr.length; i++) {
					var obj = this.cityArr[i];
					if (this.city == obj.name) {
						this.countryArr = obj.sub;
					}
				}
			},
			// getoriginProvince() { //获取籍贯地的省份
			// 	for (var i = 0; i < this.countryArr.length; i++) {
			// 		var obj = this.countryArr[i];
			// 		if (this.country == obj.name) {
			// 			this.countryArr = obj.sub;

			// 		}
			// 	}
			// },
			adress(){
				console.log(this.prov,this.city,this.country)
			}




		}
	}
</script>

<style>
	.el-card {
		margin-top: 15px;
	}
</style>
